<template>
  <y-dialog @open="open" @close="emit('close')" width="1000px" append-to-body>
    <el-form
      ref="addRef"
      :model="form"
      :rules="rules"
      size="default"
      label-width="120px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="任务名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入任务名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-row>
          <el-col>
            <el-form-item prop="plugin">
              <template #label>
                <span>
                  <el-tooltip placement="top">
                    <template #content>
                      <div>
                        执行插件是使用既定格式来描述各个执行步骤将进行怎样的操作，以适用任务中所有步骤操作和断言
                        <br />相同，仅参数不同的自动化场景的一个Python脚本，改脚本依赖底层框架，完成相应动作。
                      </div>
                    </template>
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  执行插件
                </span>
              </template>
              <y-select
                v-model="form.plugin"
                placeholder="请选择执行插件"
                :optionsFunc="listHawkeyeJobPlugin"
              >
                <template #footer>
                  <el-button
                    text
                    bg
                    size="small"
                    @click="handleHawkeyeJobPlugins"
                  >
                    插件管理
                  </el-button>
                </template>
              </y-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="监控主机" prop="hosts">
              <y-select
                v-model="form.hosts"
                placeholder="请选择监控主机"
                :optionsFunc="listHost"
                multiple
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.plugin">
          <el-col :span="24">
            <el-form-item prop="params">
              <template #label>
                <span>
                  <el-tooltip placement="top">
                    <template #content>
                      <div>
                        填写示例：{"username":"admin"}
                        <br />参数说明：参数请采用JSON格式
                      </div>
                    </template>
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  执行参数
                </span>
              </template>
              <y-code-editor v-model="form.params" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="定时执行" prop="cron">
              <template #label>
                <span>
                  <el-tooltip placement="top">
                    <template #content>
                      <div>
                        Cron表达式是一种强大的定时任务执行方式，广泛用于Unix和类Unix系统中来配置计划任务（crontab）。
                        <br />每个字段都可以包含特定值的列表、值的范围或值的组合，还可以使用通配符。下面是一些字段的示例值和它们所代表的含义：
                        <br />秒（0-59）：可选字段，表示分钟中的第几秒开始执行。
                        <br />分（0-59）：表示小时中的第几分钟开始执行。
                        <br />时（0-23）：表示一天中的第几小时开始执行。
                        <br />日（1-31）：表示月份中的第几天开始执行。
                        <br />月（1-12 或JAN-DEC）：表示年份中的第几月开始执行。
                        <br />周（0-7
                        或SUN-SAT）：表示星期中的第几天开始执行，其中0和7都代表星期日。
                        <br />年（可选，1970-2099）：表示年份中的哪一年开始执行。
                      </div>
                    </template>
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  定时执行
                </span>
              </template>
              <el-input v-model="form.cron" placeholder="请输入cron执行表达式">
                <template #append>
                  <el-button type="primary" @click="handleShowCron">
                    生成表达式
                    <i class="el-icon-time el-icon--right"></i>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="5"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="标签" prop="tags">
            <y-tag v-model="form.tags" :closable="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <y-dialog
      title="Cron表达式生成器"
      v-model="openCron"
      append-to-body
      destroy-on-close
    >
      <y-crontab
        @submit="submitCronTab"
        @close="openCron = false"
        :expression="expression"
      >
      </y-crontab>
    </y-dialog>

    <!-- 任务插件 -->
    <job-plugin
      v-model="openJobPlugin"
      :job="id"
      title="任务插件"
      @close="openJobPlugin = false"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
        <el-button @click="emit('close')">取消</el-button>
      </div>
    </template>
  </y-dialog>
</template>

<script setup name="AuJob">
import { listHost } from "@/api/oms/host";
import { listHawkeyeJobPlugin } from "@/api/oms/hawkeye/job/plugin";
import YCrontab from "@/components/YCrontab";
import JobPlugin from "./JobPlugin";

const { proxy } = getCurrentInstance();

const emit = defineEmits(["submited", "close"]);

const openCron = ref(false);
const expression = ref("");
const defaultParams = ref({});
const openJobPlugin = ref(false);

const data = reactive({
  form: {},
  queryParams: {
    product: undefined,
    protocol: undefined,
    showcase: true,
  },
  rules: {
    name: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
    plugin: [
      {
        required: true,
        message: "执行插件不能为空",
        trigger: "blur",
      },
    ],
    hosts: [{ required: true, message: "监控主机不能为空", trigger: "blur" }],
    params: [{ required: true, message: "执行参数不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

const props = defineProps({
  id: { type: String, default: "" },
  operate: { type: String, default: "add" },
  getMethod: { type: Function, default: undefined },
  addMethod: { type: Function, default: undefined },
  updateMethod: { type: Function, default: undefined },
});

/** cron表达式按钮操作 */
function handleShowCron() {
  expression.value = form.value.cron;
  openCron.value = true;
}

/** 确定后回传值 */
function submitCronTab(value) {
  form.value.cron = value;
}

/** 打开对话框事件 */
function open() {
  switch (props.operate) {
    case "update":
      props.getMethod(props.id).then((res) => {
        form.value = res.data;
      });
      break;
    default:
      reset();
      break;
  }
}

/** 重置Form方法 */
function reset() {
  form.value = {
    status: "0",
    params: JSON.stringify(defaultParams.value),
  };
  proxy.resetForm("addRef");
}

/** 任务插件列表查询 */
function handleHawkeyeJobPlugins() {
  openJobPlugin.value = true;
}

/** 提交按钮事件 */
function submit() {
  proxy.$refs.addRef.validate((valid) => {
    if (valid) {
      if (form.value.id != undefined) {
        props.updateMethod(form.value).then((res) => {
          proxy.$modal.msgSuccess("修改成功");
          submited();
        });
      } else {
        props.addMethod(form.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功");
          submited();
        });
      }
    }
  });
}

/** submited事件 */
function submited() {
  emit("submited");
  emit("close");
}
</script>
